<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中优志愿规划系统</title>
    <link rel="stylesheet" href="style.css">
    <!-- SheetJS库用于导出XLSX文件 -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page" class="login-container">
        <div class="login-card">
            <h2>中优高考志愿规划系统</h2>
            <form id="login-form">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" id="password" required>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
                <div id="login-error" style="color: red; margin-top: 10px;"></div>
            </form>
        </div>
    </div>
    
    <!-- 主页面 -->
    <div id="main-container" style="display: none;">
        <div class="container">
        <header>
            <h1>中优高考志愿规划系统</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="#student-info">考生信息管理</a></li>
                <li><a href="#consultation">咨询记录管理</a></li>
                <li><a href="#statistics">统计分析</a></li>
                <li id="user-management-link"><a href="#user-management">用户管理</a></li>
            </ul>
        </nav>
        
        <main>
            <section id="user-management" style="display: none;">
                <h2>用户管理</h2>
                <div class="card">
                    <h3>创建咨询师账号</h3>
                    <form id="add-counselor-form" class="form-grid">
                        <div class="form-group">
                            <label for="counselor-username">用户名:</label>
                            <input type="text" id="counselor-username" required placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="counselor-password">密码:</label>
                            <input type="password" id="counselor-password" required placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <label for="counselor-confirm-password">确认密码:</label>
                            <input type="password" id="counselor-confirm-password" required placeholder="请再次输入密码">
                        </div>
                        <div class="form-group full-width">
                            <button type="submit" class="btn btn-primary">创建账号</button>
                            <button type="reset" class="btn btn-secondary">重置</button>
                        </div>
                    </form>
                    <div id="create-counselor-message" style="margin-top: 15px; display: none;"></div>
                </div>
                
                <div class="card">
                    <h3>咨询师账号列表</h3>
                    <div class="table-responsive">
                        <table id="counselor-table">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>用户名</th>
                                    <th>角色</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="counselor-table-body">
                                <!-- 动态生成的咨询师列表 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            
            <section id="student-info">
                <h2>考生信息管理</h2>
                <div class="card">
                    <h3>添加考生信息</h3>
                    <form id="add-student-form" class="form-grid">
                        <div class="form-group">
                            <label for="student-id">考生ID:</label>
                            <input type="text" id="student-id" required>
                        </div>
                        <div class="form-group">
                            <label for="student-name">姓名:</label>
                            <input type="text" id="student-name" required>
                        </div>
                        <div class="form-group">
                            <label for="student-gender">性别:</label>
                            <select id="student-gender" required>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-ethnicity">民族:</label>
                            <select id="student-ethnicity" required>
                                <option value="汉族">汉族</option>
                                <option value="蒙古族">蒙古族</option>
                                <option value="回族">回族</option>
                                <option value="藏族">藏族</option>
                                <option value="维吾尔族">维吾尔族</option>
                                <option value="苗族">苗族</option>
                                <option value="彝族">彝族</option>
                                <option value="壮族">壮族</option>
                                <option value="布依族">布依族</option>
                                <option value="朝鲜族">朝鲜族</option>
                                <option value="满族">满族</option>
                                <option value="侗族">侗族</option>
                                <option value="瑶族">瑶族</option>
                                <option value="白族">白族</option>
                                <option value="土家族">土家族</option>
                                <option value="哈尼族">哈尼族</option>
                                <option value="哈萨克族">哈萨克族</option>
                                <option value="傣族">傣族</option>
                                <option value="黎族">黎族</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-birth">出生日期:</label>
                            <input type="date" id="student-birth" required>
                        </div>
                        <div class="form-group">
                            <label for="student-school">学校:</label>
                            <input type="text" id="student-school" required>
                        </div>
                        <div class="form-group">
                            <label for="student-province">所在省份:</label>
                            <input type="text" id="student-province" required>
                        </div>
                        <div class="form-group">
                            <label for="student-subject-combination">选科组合:</label>
                            <select id="student-subject-combination" onchange="updateSubjectLabels()">
                                <option value="">请选择选科组合</option>
                                <option value="物化生">物化生</option>
                                <option value="物化政">物化政</option>
                                <option value="历政生">历政生</option>
                                <option value="历政地">历政地</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-foreign-language">外语种类:</label>
                            <select id="student-foreign-language">
                                <option value="英语">英语</option>
                                <option value="俄语">俄语</option>
                                <option value="日语">日语</option>
                                <option value="德语">德语</option>
                                <option value="法语">法语</option>
                                <option value="西班牙语">西班牙语</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-parent-phone">家长电话:</label>
                            <input type="tel" id="student-parent-phone" placeholder="请输入联系电话" required>
                        </div>
                        <div class="form-group">
                            <label for="student-household-type">户口类型:</label>
                            <select id="student-household-type">
                                <option value="农业户口">农业户口</option>
                                <option value="非农业户口">非农业户口</option>
                                <option value="居民户口">居民户口</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-color-blind">是否色盲色弱:</label>
                            <select id="student-color-blind">
                                <option value="否">否</option>
                                <option value="色盲">色盲</option>
                                <option value="色弱">色弱</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="student-vision-left">左眼视力:</label>
                            <input type="text" id="student-vision-left" placeholder="如：5.0">
                        </div>
                        <div class="form-group">
                            <label for="student-vision-right">右眼视力:</label>
                            <input type="text" id="student-vision-right" placeholder="如：5.0">
                        </div>
                        <div class="form-group">
                            <label for="student-payment">缴费金额(元):</label>
                            <input type="number" id="student-payment" min="0" placeholder="请输入缴费金额">
                        </div>
                        <div class="form-group">
                            <label for="student-payment-date">缴费时间:</label>
                            <input type="date" id="student-payment-date">
                        </div>
                        
                        <div class="form-group full-width">
                            <label>是否考虑提前批:</label>
                            <div class="early-batch-options">
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-special-national" value="国家专项"> 国家专项</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-special-local" value="地方专项"> 地方专项</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-special-university" value="高校专项"> 高校专项</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-military" value="军校"> 军校</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-police" value="警校"> 警校</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-teacher-national" value="国家公费师范"> 国家公费师范</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-teacher-local" value="地方公费师范"> 地方公费师范</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-teacher-excellent-national" value="国家优师计划"> 国家优师计划</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-teacher-excellent-local" value="地方优师计划"> 地方优师计划</label>
                                <label style="display: flex; align-items: center;"><input type="checkbox" id="early-medical" value="定向医学"> 定向医学</label>
                            </div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label>成绩统计:</label>
                            
                            <!-- 平时成绩 -->
                            <div class="exam-type-group expanded">
                                <div class="exam-type-header" onclick="toggleExamType(this)">
                                    <h4>平时成绩</h4>
                                    <span class="toggle-icon">▼</span>
                                </div>
                                <div class="exam-type-content">
                                    <div class="subject-scores">
                                        <div class="subject-score-item"><label>语文</label><input type="number" id="score-usual-chinese" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>数学</label><input type="number" id="score-usual-math" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>外语</label><input type="number" id="score-usual-english" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-usual-subject1">选科1</label><input type="number" id="score-usual-subject1" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-usual-subject2">选科2</label><input type="number" id="score-usual-subject2" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-usual-subject3">选科3</label><input type="number" id="score-usual-subject3" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>总分</label><input type="number" id="score-usual" min="0" placeholder="总分"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 一模成绩 -->
                            <div class="exam-type-group">
                                <div class="exam-type-header" onclick="toggleExamType(this)">
                                    <h4>一模成绩</h4>
                                    <span class="toggle-icon">▶</span>
                                </div>
                                <div class="exam-type-content">
                                    <div class="subject-scores">
                                        <div class="subject-score-item"><label>语文</label><input type="number" id="score-mock1-chinese" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>数学</label><input type="number" id="score-mock1-math" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>外语</label><input type="number" id="score-mock1-english" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock1-subject1">选科1</label><input type="number" id="score-mock1-subject1" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock1-subject2">选科2</label><input type="number" id="score-mock1-subject2" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock1-subject3">选科3</label><input type="number" id="score-mock1-subject3" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>总分</label><input type="number" id="score-mock1" min="0" placeholder="总分"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 二模成绩 -->
                            <div class="exam-type-group">
                                <div class="exam-type-header" onclick="toggleExamType(this)">
                                    <h4>二模成绩</h4>
                                    <span class="toggle-icon">▶</span>
                                </div>
                                <div class="exam-type-content">
                                    <div class="subject-scores">
                                        <div class="subject-score-item"><label>语文</label><input type="number" id="score-mock2-chinese" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>数学</label><input type="number" id="score-mock2-math" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>外语</label><input type="number" id="score-mock2-english" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock2-subject1">选科1</label><input type="number" id="score-mock2-subject1" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock2-subject2">选科2</label><input type="number" id="score-mock2-subject2" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock2-subject3">选科3</label><input type="number" id="score-mock2-subject3" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>总分</label><input type="number" id="score-mock2" min="0" placeholder="总分"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 三模成绩 -->
                            <div class="exam-type-group">
                                <div class="exam-type-header" onclick="toggleExamType(this)">
                                    <h4>三模成绩</h4>
                                    <span class="toggle-icon">▶</span>
                                </div>
                                <div class="exam-type-content">
                                    <div class="subject-scores">
                                        <div class="subject-score-item"><label>语文</label><input type="number" id="score-mock3-chinese" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>数学</label><input type="number" id="score-mock3-math" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>外语</label><input type="number" id="score-mock3-english" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock3-subject1">选科1</label><input type="number" id="score-mock3-subject1" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock3-subject2">选科2</label><input type="number" id="score-mock3-subject2" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-mock3-subject3">选科3</label><input type="number" id="score-mock3-subject3" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>总分</label><input type="number" id="score-mock3" min="0" placeholder="总分"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 高考成绩 -->
                            <div class="exam-type-group">
                                <div class="exam-type-header" onclick="toggleExamType(this)">
                                    <h4>高考成绩</h4>
                                    <span class="toggle-icon">▶</span>
                                </div>
                                <div class="exam-type-content">
                                    <div class="subject-scores">
                                        <div class="subject-score-item"><label>语文</label><input type="number" id="score-gaokao-chinese" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>数学</label><input type="number" id="score-gaokao-math" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>外语</label><input type="number" id="score-gaokao-english" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-gaokao-subject1">选科1</label><input type="number" id="score-gaokao-subject1" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-gaokao-subject2">选科2</label><input type="number" id="score-gaokao-subject2" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label for="score-gaokao-subject3">选科3</label><input type="number" id="score-gaokao-subject3" min="0" placeholder="分数"></div>
                                        <div class="subject-score-item"><label>总分</label><input type="number" id="score-gaokao" min="0" placeholder="总分"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="student-counselor">负责咨询师:</label>
                            <select id="student-counselor">
                                <option value="">请选择咨询师</option>
                                <!-- 咨询师列表将通过JavaScript动态生成 -->
                            </select>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="student-interests">兴趣爱好:</label>
                            <textarea id="student-interests" rows="3"></textarea>
                        </div>
                        <div class="form-group full-width" style="text-align: center; margin-top: 20px;">
                            <button type="submit" class="btn btn-primary">添加考生</button>
                        </div>
                    </form>
                </div>
                
                <div class="card">
                    <h3>考生列表</h3>
                    <div class="search-bar" style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="display: flex; gap: 10px; flex: 1;">
                            <input type="text" id="search-student" placeholder="搜索考生姓名或ID..." style="flex: 1;">
                            <button id="search-btn" class="btn btn-secondary">搜索</button>
                        </div>
                        <button id="export-btn" class="btn btn-info">导出Excel</button>
                    </div>
                    <div class="table-container">
                        <table id="student-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>学校</th>
                                    <th>选科组合</th>
                                    <th>户口类型</th>
                                    <th>咨询师</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="student-list">
                                <!-- 考生列表将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            
            <section id="consultation" style="display: block;">
                <h2>咨询记录管理</h2>
                <div class="card">
                    <h3>添加咨询记录</h3>
                    <form id="add-consultation-form">
                        <div class="form-group">
                            <label for="consult-student-id">选择考生:</label>
                            <select id="consult-student-id" required>
                                <option value="">请先添加考生信息</option>
                                <!-- 考生列表将通过JavaScript动态生成 -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="consult-date">咨询日期:</label>
                            <input type="date" id="consult-date" required>
                        </div>
                        <div class="form-group">
                            <label for="consult-time">咨询时长(分钟):</label>
                            <input type="number" id="consult-time" min="1" required placeholder="录音后将自动填充">
                            <small class="form-text text-muted">提示：开始录音后，咨询时长将自动由录音时长决定</small>
                        </div>
                        <div class="form-group">
                    <label for="consult-counselor">咨询师:</label>
                    <input type="text" id="consult-counselor" required>
                </div>
                        <div class="form-group">
                            <label for="consult-topics">咨询主题:</label>
                            <input type="text" id="consult-topics" required>
                        </div>
                        <div class="form-group">
                            <label for="consult-content">咨询内容:</label>
                            <textarea id="consult-content" rows="5" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>录音功能:</label>
                            <div class="recording-controls">
                                <button type="button" id="start-recording" class="btn btn-secondary">开始录音</button>
                                <button type="button" id="stop-recording" class="btn btn-danger" disabled>停止录音</button>
                                <span id="recording-status" style="margin-left: 10px;"></span>
                            </div>
                            <audio id="recording-player" controls style="margin-top: 10px; width: 100%; display: none;"></audio>
                            <input type="hidden" id="audio-blob" name="audio-blob">
                        </div>
                        <div class="form-group">
                            <label for="consult-notes">下次计划:</label>
                            <textarea id="consult-notes" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">添加记录</button>
                    </form>
                </div>
                
                <div class="card">
                    <h3>咨询记录列表</h3>
                    <div class="search-bar">
                        <select id="filter-student">
                            <option value="">全部考生</option>
                            <!-- 考生列表将通过JavaScript动态生成 -->
                        </select>
                        <input type="date" id="filter-date">
                        <button id="filter-btn" class="btn btn-secondary">筛选</button>
                    </div>
                    <div class="table-container">
                        <table id="consultation-table">
                            <thead>
                                <tr>
                                    <th>考生ID</th>
                                    <th>考生姓名</th>
                                    <th>咨询主题</th>
                                    <th>咨询时长</th>
                                    <th>咨询日期</th>
                                    <th>咨询师</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="consultation-list">
                                <!-- 咨询记录列表将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            
            <section id="statistics" style="display: none;">
                <h2>统计分析</h2>
                <div class="card">
                    <h3>基本统计</h3>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <h4>总考生数</h4>
                            <p id="total-students">0</p>
                        </div>
                        <div class="stat-card">
                            <h4>本月咨询次数</h4>
                            <p id="monthly-consults">0</p>
                        </div>
                        <div class="stat-card">
                            <h4>平均咨询时长</h4>
                            <p id="avg-consult-time">0分钟</p>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h3>近期咨询趋势</h3>
                    <div id="consult-chart" style="height: 300px;">
                        <!-- 图表将通过JavaScript动态生成 -->
                        <p>暂无数据</p>
                    </div>
                </div>
            </section>
        </main>
        
        <footer>
            <p>&copy; 2024 中优高考志愿规划系统 - 版权所有</p>
        </footer>
    </div>
    </div>
    
    <!-- 详情模态框 -->
    <div id="detail-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modal-body">
                <!-- 详情内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <script src="script.js?v=1.4"></script>
</body>
</html>